<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-card>
        <el-input style="width: 200px; margin-right: 10px" v-model="params.name"  placeholder="请输入分类名称查询"></el-input>
        <el-button type="primary" @click="Search">查询</el-button>
        <el-button type="warning" @click="reset()">重置</el-button>
      </el-card>
    </div>

    <div>
      <el-card>
        <el-button size="small" type="primary" @click="add()">新增</el-button>
        <el-button size="small" type="danger" @click="delBatch()">批量删除</el-button>
        <el-button size="small" type="primary" @click="exp()">批量导出</el-button>
        <el-upload action="http://localhost:9090/api/type/upload" style="display: inline-block; margin-left: 10px" :show-file-list="false" :on-success="successUpload">
          <el-button size="small" type="success">批量导入</el-button>
        </el-upload>
      </el-card>
    </div>

    <div style="margin-top: 10px">
      <el-card>
        <el-table :data="tableData" style="width: 100%" ref="table" @selection-change="handleSelectionChange" :row-key="getRowKeys">
          <el-table-column ref="table" type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="分类名称"></el-table-column>
          <el-table-column prop="content" label="内容">
            <template v-slot="scope">
              <el-button type="success" size="mini" @click="viewContent(scope.row.description)">查看内容</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作"  align="center">
            <template v-slot="scope">
              <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
              <!--            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">-->
              <!--              <el-button slot="reference" type="danger" style="margin-left: 5px">删除</el-button>-->
              <!--            </el-popconfirm>-->
              <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="params.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>

      </el-card>
    </div>

    <div>
      <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="form">
          <el-form-item label="分类名称" label-width="15%">
            <el-input v-model="form.name" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="分类描述" label-width="15%">
            <el-input type="textarea" :rows="5" v-model="form.description" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-dialog title="描述内容" :visible.sync="descriptionVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <div style="padding: 20px">
        <div v-html="description"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="descriptionVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      //自定义一个params的变量
      params: {
        name: '',
        pageNum: 1,
        pageSize: 5
      },
      tableData: [],
      total:0,
      dialogFormVisible: false,
      form: {},
      description: '',
      descriptionVisible: false,
      multipleSelection: []
    }
  },
  // 页面加载的时候，在created里面做的一些事情
  created() {
      this.Search();
  },
  //会定义一些触发的事件方法
  methods:{successUpload(res) {
      if (res.code === '200') {
        this.$message.success("批量导入成功")
        this.Search()
      } else {
        this.$message.error(res.msg)
      }
    },
    exp() {
      let user = localStorage.getItem("user");
      location.href = 'http://localhost:9090/api/type/export?token=' + JSON.parse(user).token
    },
    viewContent(description){
      this.description = description
      this.descriptionVisible = true
    },
    add() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    edit(obj) {
      this.form = obj;
      this.dialogFormVisible = true;
    },
    del(id) {
      this.$confirm('确定要删除该条记录吗?', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/type/" + id).then(res => {
          if (res.code === '200') {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.Search();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        // 取消删除操作
      });
    },
    submit() {
      request.post("/type", this.form).then(res => {
        if (res.code === '200') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.Search();
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    Search(){
      request.get('/type/search',{
        params: this.params
      }).then(res =>{
        if (res.code === '200'){
            this.tableData = res.data.list
            this.total = res.data.total
        }else {

        }
      })
    },
    reset(){
      this.params = {
        name: '',
        pageNum: 1,
        pageSize: 5
      }
      this.Search()
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize
      this.Search()
    },
    handleCurrentChange(pageNum){
      this.params.pageNum = pageNum
      this.Search();
    },
    delBatch() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选您要删除的项")
        return
      }
      this.$confirm('确定要删除该条记录吗?', '确认删除', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
      request.put("/type/delBatch", this.multipleSelection).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.Search()
        } else {
          this.$message.error(res.msg)
        }
      })
      }).catch(() => {
        // 取消删除操作
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getRowKeys(row) {
      return row.id;
    }
  }
}
</script>
<style scoped>

</style>